<template>
  <div class="show">
    <div style="margin: 20px 0;"></div>
    <el-card class="box-card">
        <div slot="header" class="clearfix">
            <el-button type="primary" plain v-on:click="returnPerson()">返回</el-button>
            <h2 align="center">{{news.title}}</h2>
            <a>{{news.summary}}</a>
            <div style="margin: 10px 0;" class="left">
                <a>{{news.time}}</a><br>
                <a>{{news.writer}}</a>
            </div>
        </div>
        <div class="text item">
            <div class="content">
                <pre
                    style="font-family:Avenir,Helvetica,Arial,sans-serif; 
                       margin-bottom:5px;
                       margin-left:5px;
                       line-height:18px;
                       white-space:break-spaces;">{{news.content}}</pre>
                <div class="demo-image__placeholder">
                    <div class="block">
                        <br>
                        <el-image :src="'http://120.77.71.211:9090/mynewsweb/'+news.path"></el-image>
                    </div>
                </div>
            </div>
        </div>
    </el-card>
    <el-card class="box-card">
        <div slot="header" class="clearfix">
            <el-input
                placeholder="留下你的精彩评论吧"
                prefix-icon="el-icon-edit"
                style="width:77%"
                v-model="userComment.content">
            </el-input>
            <el-button type="primary" plain icon="el-icon-position" v-on:click="comment()">提交评论</el-button>
        </div>

      <el-col
        :span="20"
        v-for="(a,index) in comments"
        :key="a.id"
        :offset="index =0"
        style="width:100%"
      >
        <el-card>
                <div>
                    <a class="username">{{a.userName}}</a>&nbsp;&nbsp;<a class="time">{{a.time}}</a>
                    <div style="margin: 5px 0;">
                        <a class="a">{{a.content}}</a>
                    </div>
                </div>
        </el-card>
      </el-col>
    </el-card>
  </div>
</template>

<script>
export default {
    name:"ShowMyNews",
    data(){
        return{
            content:[
                {newID:'1',userName:'张三',content:'手动阀撒撒旦发dsfsdfdsfsdfdsf的发射点发射点发射点犯得上发射点发射点大水发射点范德萨发',time:'2020-12-12'},
                {newID:'2',userName:'李四',content:'手动阀撒撒旦发大水发射点范德萨发',time:'2020-12-12'},
                {newID:'3',userName:'张三',content:'手动阀撒撒旦发大水发射点范德萨发',time:'2020-12-12'},
                {newID:'4',userName:'张三',content:'手动阀撒撒旦发大水发射点范德萨发',time:'2020-12-12'},
            ],
            news:{},//新闻信息
            comments:[],//评论信息
            user: {
                    userName: '',
                    userKind:'',
                },//用来存放用户登录信息
            userComment:{
                userId:'',
                newID:'',
                userName:'',
                content:'',
            }//存放发表评论的信息
        }
    },

    methods: { //自定义函数
        oneNew(){
            //获取对应id信息
            var start = location.href.lastIndexOf("=");
            var id = location.href.substring(start+1);
            console.log(id);
            var _this = this;
            //获取该新闻的评论
            this.$axios.get("http://120.77.71.211:9090/mynewsweb/api/showComment?id="+id).then(res=>{
                console.log(res.data);
                _this.comments = res.data;
            });
            //获取该新闻
            this.$axios.get("http://120.77.71.211:9090/mynewsweb/api/findOne?id="+id).then(res=>{
                console.log(res.data);
                _this.news = res.data;
            });
        },

        showComments(){
            //获取对应id信息
            var start = location.href.lastIndexOf("=");
            var id = location.href.substring(start+1);
            console.log(id);
            var _this = this;
            //获取该新闻的评论
            this.$axios.get("http://120.77.71.211:9090/mynewsweb/api/showComment?id="+id).then(res=>{
                console.log(res.data);
                _this.comments = res.data;
            });
        },

        comment(){
            var userString=localStorage.getItem("user");
            if(userString){
                this.user=JSON.parse(userString);
                this.userComment.userName=this.user.userName;
                this.userComment.userId=this.user.userId;
                var start = location.href.lastIndexOf("=");
                var id = location.href.substring(start+1);
                this.userComment.newId=id;
                this.$axios.post("http://120.77.71.211:9090/mynewsweb/api/addComment", this.userComment).then((res) => {
                    console.log(res.data);
                    if (res.data.state) {
                        alert(res.data.msg);
                        this.showComments();
                        this.usercomments={};
                    } else {
                        alert(res.data.msg);
                    }
                });
            }else{
                alert("您尚未登录，登录后尚可评论")
            }

        },
        returnPerson(){
            this.$router.push("/personalSpace");
        },
        delet(){
            this.$axios.post("http://120.77.71.211:9090/mynewsweb/api/userLogin", this.user).then((res) => {
                if (res.data.state) {
                    alert(res.data.msg);
                    this.$router.push("#/mainTable");
                } else {
                    alert(res.data.msg);
                }
            });
        }

    },
    created(){
        //生命周期函数
        // var userString = localStorage.getItem("user");
        // if(userString){
        //     this.user =  JSON.parse(userString);
        // }else{
        //     alert("您尚未登录,点击确定跳转至登录页面!");
        //     location.href ="/mynewsweb/login.html";
        // }
        //调用获取新闻和评论的方法
          // 在此处执行你要执行的函数 
        this.oneNew();
        this.showComments();
    }
}
</script>

<style>
    .show{
        width: 40%;
        margin:0 auto;
    }
    .title{
        font-size:'600px',
    }
    .text {
        font-size: 14px;
    }

    .item {
        margin-bottom: 18px;
    }

    .clearfix:before,
    .clearfix:after {
        display: table;
        content: "";
        
    }
    .clearfix:after {
        clear: both
    }

    .box-card {
        width:100%;
    }

    .left{
        float: left;
        width:150px; 
        height:100%
    }

    .right{
        float: right;
    }
    .content{
        width:90%;
        margin:0 auto;
    }

    .a{
        float: right;
        width: 95%;

    }
    .username{
        font-weight:bolder;
    }
    .time{
        font-weight: lighter;
    }
</style>